import React, {Component} from 'react';
import {connect} from 'dva';
import FuelParam from "@/pages/HanFan/components/RawFuelTracking/FuelParam";
import {Table, Input, InputNumber, Popconfirm, Form, Card} from 'antd';
import {dateFormat} from "@/utils/time";




const EditableContext = React.createContext();

class EditableCell extends React.Component {
  getInput = () => {
    if (this.props.inputType === 'number') {
      return <InputNumber/>;
    }
    return <Input/>;
  };

  renderCell = ({getFieldDecorator}) => {
    const {
      editing,
      dataIndex,
      title,
      inputType,
      record,
      index,
      children,
      ...restProps
    } = this.props;
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item style={{margin: 0}}>
            {getFieldDecorator(dataIndex, {
              rules: [
                {
                  required: true,
                  message: `Please Input ${title}!`,
                },
              ],
              initialValue: record[dataIndex],
            })(this.getInput())}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };

  render() {
    return <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>;
  }
}

class EditableTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editingKey: ''};
    this.columns = [
      {
        title: '指标名称',
        dataIndex: 'desc',
        width: 100,
        editable: false,
        fixed:'left'

      },
      {
        title: '单位',
        dataIndex: 'unit',
        width: 80,
        editable: false,
        fixed:'left'

      },
      {
        title: '类别',
        dataIndex: 'type',
        width: 80,
        editable: false,
        fixed:'left'
      },
      {
        title: '下限',
        dataIndex: 'lower',
        width: 80,
        editable: false,

      },
      {
        title: '上限',
        dataIndex: 'upper',
        width: 80,
        editable: false,

      },

      {
        title: '分数',
        dataIndex: 'score',
        width: 80,
        editable: true,
      },
      {
        title: '区间1',
        dataIndex: 'i0',
        width: 150,
        editable: true,
      },
      {
        title: '子分数1',
        dataIndex: 's0',
        width: 100,
        editable: true,
      },

      {
        title: '区间2',
        dataIndex: 'i1',
        width: 150,
        editable: true,
      },
      {
        title: '子分数2',
        dataIndex: 's1',
        width: 100,
        editable: true,

      },
      {
        title: '区间3',
        dataIndex: 'i2',
        width: 150,
        editable: true,
      },
      {
        title: '子分数3',
        dataIndex: 's2',
        width: 100,
        editable: true,
      },
      {
        title: '区间4',
        dataIndex: 'i3',
        width: 150,
        editable: true,
      },
      {
        title: '子分数4',
        dataIndex: 's3',
        width: 100,
        editable: true,
      },
      {
        title: '区间5',
        dataIndex: 'i4',
        width: 150,
        editable: true,
      },
      {
        title: '子分数 5',
        dataIndex: 's4',
        width: 100,
        editable: true,
      },
      {
        title: '区间6',
        dataIndex: 'i5',
        width: 150,
        editable: true,
      },
      {
        title: '子分数 6',
        dataIndex: 's5',
        width: 100,
        editable: true,
      },
      {
        title: '区间7',
        dataIndex: 'i6',
        width: 150,
        editable: true,
      },
      {
        title: '子分数7',
        dataIndex: 's6',
        width: 100,
        editable: true,
      },

      {
        title: '操作',
        width: '10%',
        dataIndex: 'operation',
        render: (text, record) => {
          const {editingKey} = this.state;
          const editable = this.isEditing(record);
          return editable ? (
            <span>
              <EditableContext.Consumer>
                {form => (
                  <a
                    onClick={() => this.save(form, record.key)}
                    style={{marginRight: 8}}
                  >
                    保存
                  </a>
                )}
              </EditableContext.Consumer>
              <Popconfirm title="确定取消?" onConfirm={() => this.cancel(record.key)}>
                <a>取消</a>
              </Popconfirm>
            </span>
          ) : (
            <a disabled={editingKey !== ''} onClick={() => this.edit(record.key)}>
              编辑
            </a>
          );
        },
      },
    ];
  }

  componentDidMount = () => {
    const {dispatch} = this.props;
    dispatch({
      type: 'gaoluDiagnose/getRules'
    })
  }

  isEditing = record => record.key === this.state.editingKey;

  cancel = () => {
    this.setState({editingKey: ''});
  };

  save(form, key) {
    form.validateFields((error, row) => {
      if (error) {
        return;
      }
      const newData = [...this.props.rules];
      const index = newData.findIndex(item => key === item.key);
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, {
          ...item,
          ...row,
        });
        this.setState({data: newData, editingKey: ''});
      } else {
        newData.push(row);
        this.setState({data: newData, editingKey: ''});
      }
    });
  }

  edit(key) {
    this.setState({editingKey: key});
  }

  render() {
    const components = {
      body: {
        cell: EditableCell,
      },
    };

    const columns = this.columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: col.dataIndex === 'age' ? 'number' : 'text',
          dataIndex: col.dataIndex,
          title: col.title,
          editing: this.isEditing(record),
        }),
      };
    });

    return (
      <Card
        style={{width: '100%'}}
        bordered={false}
      >
        <EditableContext.Provider value={this.props.form}>
          <Table
            components={components}
            bordered
            dataSource={this.props.rules}
            columns={columns}
            scroll={{ x: 2350,y:600 }}
            rowClassName="editable-row"
            pagination={false}
            loading={this.props.rulesLoading}
          />
        </EditableContext.Provider>
      </Card>
    );
  }
}

const editableFormTable = Form.create()(EditableTable);


// 这里使用析构,拆出state中的demo
// demo对象 即models/demo.js中的state对象
export default connect(({gaoluDiagnose,loading}) => ({
  rules: gaoluDiagnose.rules,
  rulesLoading: loading.effects["gaoluDiagnose/getRules"]
}))(editableFormTable);

